<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>比原BtmCheck</title>
		<style>
			body{
				margin: 0;
				height: 100vh;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: flex-end;
			}
			/* 身体 */
			.monster{
				width: 10em;
				height: 13em;
				color: limegreen;
				background-color: currentColor;
				border-radius: 5em 5em 5% 5%/6em 6em 5% 5%;
				position: relative;
			}
			/* 眼睛 */
			.eye{
				position: absolute;
				width: 6.5em;
				height: 6.5em;
				background: 
				radial-gradient(
					circle at 50% 25%,
					white 0.4em,
					transparent 0.4em
				),
				radial-gradient(
					circle at 50% 40%,
					black 1.7em,
					transparent 1.7em
				),
				white;
				border-radius: 77% 77% 77%/92% 92% 60% 60%;
				top: 2em;
				left: calc((10em - 6.5em)/2);
				box-shadow: 0.2em 0.9em 0 hsla(0, 0%, 0%, 0.1);
			}
			/* 嘴巴 */
			.mouth{
				position: absolute;
				width: 3em;
				height: 2.1em;
				background-color: black;
				bottom: 0.9em;
				left: calc((10em - 3em)/2);
				border-radius: 70% 70% 3.5em 3.5em;
				overflow: hidden;
			}
			/* 舌头 */
			.mouth::before{
				content: '';
				position: absolute;
				width: inherit;
				height: 0.6em;
				background-color: tomato;
				border-radius: 50% 50% 0 0;
				bottom: 0;
			}
			.foot {
				width: 200px;
				height: 50px;
			}
		</style>
	</head>
	<body>
		<h1>BtmCheck演示</h1>
		<figure class="monster">
			<div class="ear left"></div>
			<div class="ear right"></div>
			<div class="eye"></div>
			<div class="mouth">
				<div class="teeth"></div>
			</div>
		</figure>
		<div class="foot">
			<a target="_blank" href="http://beian.miit.gov.cn" style="text-decoration:none;height:20px;line-height:20px">陕ICP备17017863号-2</a>
		</div>
	</body>
</html>